<template>
	<cl-dialog
		title="编辑信息"
		width="450px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="客户姓名" prop="cus_name">
				<el-input v-model="form.cus_name" placeholder="请填写客户姓名" maxlength="30" />
			</el-form-item>
			<el-form-item label="所属门店" prop="dept_id" v-if="bizRefData.shop_childs.length > 0">
				<cl-shop-select
					v-model="form.dept_id"
					filterable
					placeholder="请选择所属门店"
					style="width: 100%"
					:biz_id="detail.biz_id"
				/>
			</el-form-item>
			<el-form-item label="客户手机号" prop="cus_mobile" v-if="!detail.cus_mobile">
				<el-input
					placeholder="请填写客户手机号"
					v-model.trim="form.cus_mobile"
					maxlength="11"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { validate } from "@/utils/validate";
export default {
	data() {
		const validateMobile = (rule, value, callback) => {
			if (!this.isEditMobile) {
				return callback();
			}
			if (!validate.mobile.test(value)) {
				return callback(new Error("客户手机号格式不正确"));
			}
			return callback();
		};
		return {
			visible: false,
			saving: false,
			detail: {},
			form: {
				cus_id: 0,
				cus_name: "",
				dept_id: "",
				cus_mobile: ""
			},
			rules: {
				dept_id: [{ required: true, message: "请选择门店" }],
				cus_mobile: [
					// { required: true, message: "请输入新手机号" },
					{ validator: validateMobile }
					// { pattern: validate.mobile, message: "客户手机号格式不正确" }
				]
			}
		};
	},
	computed: {
		isEditMobile() {
			return this.detail.cus_mobile !== this.form.cus_mobile;
		},
		bizRefData() {
			const { biz_id } = this.detail;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		open(detail) {
			this.detail = { ...detail };
			this.visible = true;
			if (this.detail.dept_id == 0) {
				this.detail.dept_id = "";
			}
			Object.keys(this.form).forEach(key => {
				this.form[key] = this.detail[key] ?? "";
			});
			console.log(this.form);
			this.init();
		},
		async init() {
			const { biz_id } = this.detail;
			// this.getBizRefBrand(biz_id);
			this.getBizRefShop(biz_id);
		},
		close() {
			this.reset();
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
		},
		reset() {
			this.$resetFields(this.form);
			this.$refs.form?.resetFields?.();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_mobile, ...args } = this.form;
				let form = { ...args };
				if (cus_mobile && this.isEditMobile) {
					form.cus_mobile = cus_mobile;
				}
				this.saving = true;
				await this.$service.customer.customizeUpdate(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		}
	}
};
</script>
